import React, { useState, useEffect } from 'react'
import { Table, Button, Popconfirm, Pagination,Select } from 'antd'
import { $list, $del } from '../../api/adminApi';
import { $list as $roleList } from '../../api/roleApi';
import AddAdmin from './AddAdmin';
import MyNotification from '../../components/MyNotification/MyNotification';
export default function Admin() {
    let [roleList,setRoleList]=useState([])
    const loadRoleList=()=>{
        $roleList().then((data)=>{
            data=data.map((r)=>{
                return{
                    value:r.roleId,
                    label:r.roleName
                };
            });
            data.unshift({value:0,label:'请选择角色'})
            setRoleList(data);
        })
    }
    let [roleId,setRoleId]=useState(0)
    let [count, setCount] = useState(1)
    let [pageIndex, setPageIndex] = useState(1)

    let [adminList, setAdminList] = useState([])
    const [open, setOpen] = useState(false);
    let [loginId, setLoginId] = useState(0)
    let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })
    useEffect(() => {
        loadRoleList()
        loadList()
    }, [pageIndex]);
    const loadList = () => {
        $list({roleId, pageSize: 2, pageIndex }).then(({ data, count }) => {
            console.log(data)
            data = data.map(r => {
                return {
                    ...r,
                    key: r.loginId,
                    roleName:r.role.roleName,
                }
            })

            setAdminList(data)
            setCount(count)
        })
    }
    const edit = (loginId) => {

        setOpen(true)
        setLoginId(loginId)
    }
    const del = (id, photo) => {
        $del({ id, photo }).then(({ success, message }) => {
            if (success) {
                setNotiMsg({ type: 'success', description: message })
                loadList()
            } else {
                setNotiMsg({ type: 'error', description: message })
            }
        })

    }
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
        },
        {
            title: '账号',
            dataIndex: 'loginId',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '电话',
            dataIndex: 'phone',
        },
        {
            title: '头像',
            dataIndex: 'photo',
            render: (ret) => (
                <>
                    <img style={{ width: '50px' }} src={"http://localhost:8090/upload/" + ret} />
                </>
            )
        },
        {
            title: '角色',
            dataIndex: 'roleName',
        },
        {
            title: '操作',
            key: 'action',
            render: (ret) => (
                <>
                    <Button size='small' style={{ borderColor: 'orange', color: 'orange' }} onClick={() => {
                        edit(ret.loginId)
                    }}>编辑</Button>
                    <Popconfirm
                        title="提示"
                        description="确定删除吗?"
                        onConfirm={() => { del(ret.id, ret.photo) }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button size='small' danger style={{ marginLeft: '5px' }} >删除</Button>
                    </Popconfirm>
                </>

            ),
        },
    ];
    return (
        <>
            <div className='search'>
                <span>角色：</span>
                <Select size="small" style={{width:'100px'}}
                    options={roleList} defaultValue={0} onSelect={(value)=>{setRoleId(value)}}
                ></Select>
                <Button type="primary" style={{marginLeft:'5px'}} size="small" onClick={()=>{loadList()}}>查询</Button>
                <Button style={{marginLeft:'8px'}} size="small" onClick={() => { setOpen(true) }}>
                    添加
                </Button>
            </div>
            <Table size="small" dataSource={adminList} columns={columns} pagination={false} />
            <Pagination size="small" defaultCurrent={pageIndex} total={count} pageSize={2} onChange={(page) => { setPageIndex(page) }} />
            <AddAdmin open={open} setOpen={setOpen} loadList={loadList} loginId={loginId} setLoginId={setLoginId} />
            <MyNotification notiMsg={notiMsg} />
        </>
    )
}
